<template>
 <div class="container">
   <div class="elrow1">
  <el-row  class="elrow">
    <el-col :span="10" class="top">
    
      <img :src="coverImgUrl"/>
   
    </el-col>
    <el-col :span="14" >
      <div class="rightm">
        <div class="title">
        <span class="tttt">{{title}}</span>
        </div>
        <div class="detail">
          <div class="aimg">
          <img :src="avaImgUrl" />
          </div>
          <span>{{author}}</span>
        </div>
        <div class="text">
          <span>简介：{{detail}}</span>
        </div>
      </div>
    </el-col>
</el-row>
   </div>
   <div class="elrow2">
<el-row >
    <el-table :data="listdata" highlight-current-row border stripe
                     @row-dblclick="playMusic" v-loading="loading" >

                <el-table-column label="音乐标题" prop="name"></el-table-column>

                <el-table-column label="歌手" prop="ar[0].name"></el-table-column>

                <el-table-column label="专辑名" prop="al.name"></el-table-column>

                <el-table-column label="时长"  width="80px;">
                   <template slot-scope="scope">
                <span>{{changetime(scope.row.dt)}}</span>
                </template>
                </el-table-column>

            </el-table>
</el-row>
   </div>
 </div>
</template>
<script>
export default {
  data(){
    return{
      listdata:[],
      id:this.$route.params.id,
      loading:true,
      title:'',
      detail:"",
      author:"",
      coverImgUrl:"",
      avaImgUrl:'',
      tempList:[]
    }
  },
  created(){
    this.getList();
  },
  methods:{
    playMusic(row){
      this.$emit('playMusic',row, this.tempList);
    },
     // 变化时间的格式
      changetime(time){
     
      time=time/1000;
      var minute=parseInt(time/60);
      if(minute<10){
        minute="0"+minute;
      }

      var second=Math.round(time%60);
      if(second<10){
        second="0"+second;
      }

      return minute.toString()+":"+second.toString();
    },
    // 获取歌单的数据
   async getList(){
      
     const res=await this.$axios.get(this.api+'/playlist/detail',{
        params:{
          id:this.id
        },
          withCredentials: true
      });
      console.log(res);
        this.listdata=res.data.playlist.tracks;
        this.title=res.data.playlist.name;
        this.detail=res.data.playlist.description;
        this.coverImgUrl=res.data.playlist.coverImgUrl;
        this.avaImgUrl=res.data.playlist.creator.avatarUrl;
        this.author=res.data.playlist.creator.nickname;
       var m=res.data.playlist.tracks;
        this.loading=false;
       for(let i=0;i<m.length;i++){
         this.tempList.push(m[i].id);
       }
      
    }
  }

}
</script>
<style scoped>
 .elrow{
   display: flex;
 }
 
 .top img{
   height: 80%;
   width: 60%;
   display: block;
   
   margin-left: 15%;
 }
 .table{
   background-color: aquamarine;
   height: 60px;
 }
 .container{
   width: 70%;
   border: 1px solid skyblue;
   margin: auto;
 }
 .rightm{
   display: flex;
  border-left: 1px solid rgb(228, 41, 41);
   flex-direction: column;
   /* background-color: aquamarine; */
 }
 .detail{
   flex: 1;
   background-color: brown;
   display: flex;
   flex-direction: row;
   justify-content: space-around;
   align-items: center;
   line-height: normal;
 }
 .aimg{

   flex: 1;
 
 }
.aimg img{
 width: 30%;
 height: 30%;
 margin: auto;
}

 .detail span{
   display: block;
   flex: 2;
   
 }
 .title{
   flex: 1;
   /* background-color: cyan; */
   line-height: 50px;

 }
 .tttt{
   /* background-color: cadetblue; */
   font-size: 20px;
   font-weight: 700;
 }
 .text{
   flex:1;
   /* margin-top: -100px; */
   /* background-color: rgb(133, 133, 145); */
 }
.text span{
  display: block;
  line-height: 30px;
  font-size: 15px;
}
.elrow2{
 margin-top: 30px;
}
</style>